import React, { Component, } from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import HearItem from './headerItem';
import ImagePicker from './ImagePicker';
import { Form, } from './common-ui/Form';
import { Input, } from './common-ui/Input';

const styles = StyleSheet.create({
  txtKey: {
    color: '#212121',
  },
  txtTip:{
    color: '#212121',
    marginRight: 2, 
  }
});

export default class AuthStepOne extends Component {
  constructor(p) {
    super(p);
    this.state = {
      radioData: [
        { content: "公司", value: "1", disabled: false, },
        { content: "个体", value: "3", disabled: false, },
      ],
      filters: {
        // 企业信息
        nameCh: '',
        nameEn: '',
        province: '',
        city: '',
        county: '', // 区
        address: '',
        staffNum: '',
        exportType: '',
        mainExportArea: '',
        goodName: '',
        hisExportAmt: '',
        expectExportAmt: '',
        piPrefix: '',
        webSite: '',
        remark: '',
        othFileId: '',
      },
      validateResults: {},
      companyInfo: null,
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log('TAGGG', `componentWillReceiveProps====CompanyInfo==${JSON.stringify(nextProps)}`);
    if (nextProps && nextProps.companyInfo) {
      let _info = nextProps.companyInfo.enterpriseBaseInfo;
      this.setState({
        companyInfo: nextProps.companyInfo,
        filters: {
          ...this.state.filters,
          ..._info,
          hisExportAmt: _info.hisExportAmt + '',
          expectExportAmt: _info.expectExportAmt + '',
          staffNum: _info.staffNum + '',
        },
      });
    }
  }

  handleChangeFilter(key, value) {
    this.setState({
      filters: {
        ...this.state.filters,
        [key]: value,
      },
    });
  }

  getCompanyInfo = () => {
    return {
        ...this.state.filters,
    }
  }

  updateImageId(id) {
    this.handleChangeFilter('othFileId', id);
  }

  renderItem(title, placeholder, inputId, inputValue, showDevideLine, showTip, useImagePicker) {
    let _imgUrl = '';
    if (useImagePicker && this.state.companyInfo) {
      _imgUrl = this.state.filters.othFileUrl;
    }
    return (
      <Form.Item
        style={{ paddingVertical: 13, }}
        label= {
          <View style={{flexDirection: 'row', alignItems: 'center', width: 90, marginRight: 32, }}>
            {showTip ? <Text style={{ color: '#212121', marginRight: 2, }}>*</Text> : <View/>}
            <Text style = {styles.txtKey}>{title}</Text>
          </View>
        }
        hasLine={showDevideLine}
      >
        {
          useImagePicker?
          <ImagePicker OnImageId={(id) => {
            this.updateImageId(id)
          }} imgUrl={_imgUrl}/>
          :
          <Input testID={inputId} value={inputValue} placeholder={placeholder} onChange={(value) => { this.handleChangeFilter(inputId, value); }} />   
        }     
      </Form.Item>
    )
  }

  render() {
    return (
      <>
        <HearItem title={'企业信息'} />
        {this.renderItem('企业中文名称', '企业中文名称', 'nameCh', this.state.filters.nameCh, true, true, false)}
        {this.renderItem('企业英文名称', '企业英文名称', 'nameEn', this.state.filters.nameEn, true, true, false)}
        {this.renderItem('实际经营地址', '实际经营地址', 'address', this.state.filters.address, true, true, false)}
        {this.renderItem('企业人数', '企业人数', 'staffNum', this.state.filters.staffNum, true, true, false)}
        {this.renderItem('出口类型', '出口类型', 'exportType', this.state.filters.exportType, true, true, false)}
        {this.renderItem('主要出口国家和地区', '主要出口国家和地区', 'mainExportArea', this.state.filters.mainExportArea, true, true, false)}
        {this.renderItem('常用PI编号前缀', 'PI编号填写后审核/入账更快', 'piPrefix', this.state.filters.piPrefix, true, false, false)}
        {this.renderItem('出口商品名称', '请输入主要出口产品名称', 'goodName', this.state.filters.goodName, true, true, false)}
        {this.renderItem('历史年出口额', '请输入整数', 'hisExportAmt', this.state.filters.hisExportAmt, true, true, false)}
        {this.renderItem('预计年出口额', '请输入整数', 'expectExportAmt', this.state.filters.expectExportAmt, true, true, false)}
        {this.renderItem('企业网站', '如需使用结汇提现，请输入企业网站', 'webSite', this.state.filters.webSite, true, true, false)}
        {this.renderItem('备注', '可填写网站、居住地址的补充信息', 'remark', this.state.filters.remark, true, true, false)}
        {this.renderItem('其他附件（选填）', '', '', this.state.filters.othFileId, false, true, true)}
      </>
    );
  }
}
